import { StyleSheet } from 'react-native'
import { ApplicationStyles, Metrics, Fonts, Colors } from '../../Themes/'

export default StyleSheet.create({
  ...ApplicationStyles.screen,
  container: {
    flex: 1,
    padding: Metrics.doubleBaseMargin,
  },
  title: {
    fontSize: Fonts.size.regular,
    marginLeft: Metrics.smallMargin,
  },
  box: {
    justifyContent: 'space-around',
    flexDirection: 'row',
    flexWrap: 'wrap',
    marginBottom: Metrics.doubleBaseMargin,
  },
  item: {
    width: '50%',
    padding: Metrics.smallMargin,
  },
  boxItem: {
    padding: Metrics.baseMargin,
    alignItems: 'center',
    backgroundColor: Colors.snow,
  },
  boxItemActive: {
    padding: Metrics.baseMargin,
    alignItems: 'center',
    backgroundColor: Colors.secondary,
  },
  itemText: {
    fontSize: Fonts.size.h6
  },
  itemTextActive: {
    fontSize: Fonts.size.h6,
    color: 'rgba(0,0,0,0.85)'
  },
  modalBg: {
    flex: 1,
    backgroundColor: 'rgba(0,0,0,0.6)',
  },
  modalContainer: {
    padding: Metrics.doubleBaseMargin,
    backgroundColor: Colors.snow,
  }
})
